 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <meta name="author" content="www.yanshisan.cn" />
    <meta name="robots" content="all" />
    <title>留言板</title>
    <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <link rel="stylesheet" href="../css/master.css" />
    <link rel="stylesheet" href="../css/gloable.css" />
    <link rel="stylesheet" href="../css/nprogress.css" />
    <link rel="stylesheet" href="../css/message.css" />
    <link rel="shortcut icon" th:href="@{favicon.ico}" />
</head>
<body>
<div class="header">
</div>
<header class="gird-header">
    <div class="header-fixed">
        <div class="header-inner">
            <a href="javascript:void(0)" class="header-logo" id="logo">Message</a>
            <nav class="nav" id="nav">
                <ul>
                    <li><a href="/homepage">首页</a></li>
                    <li><a href="/article">博客</a></li>
                    <li><a href="/message">留言</a></li>
                    <li><a href="/link">友链</a></li>
                    <li><a href="/aboutMe">日志</a></li>
                    <li><a href="/loginOut" th:if="${session.name}">退出</a></li>
                    <li><a href="/toUpdateUser"><p th:inline="text" th:if="${session.name}">[[${session.name}]]</p></a></li>
                    <li><a href="/toUpdateUser"  th:if="${session.name}">
                        <img th:src="'http://blog-cxz.oss-cn-beijing.aliyuncs.com/'+${session.id}+'.jpg'" class="layui-nav-img">
                    </a></li>
                </ul>
            </nav>
            <a href="/html/login.html"  th:if="not ${session.name}" class="blog-user">
                <p style="font-family: 楷体">请登录</p>
            </a>
            <a class="phone-menu">
                <i></i>
                <i></i>
                <i></i>
            </a>
        </div>
    </div>
</header>

<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="container-inner">
            <section class="msg-remark">
                <h1 style="font-family: 楷体">留言板</h1>
                <p style="font-family: 楷体">
                    沟通交流，拉近你我！我们的<span style="color: red" th:text="${session.userCount}"></span>位小伙伴共同留下了<span style="color: red" th:text="${session.messageCount}"></span>条留言和回复哦!
                </p>
            </section>
            <div class="textarea-wrap message" id="textarea-wrap">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
             <textarea id="message_content" name="message_content" lay-verify="content" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                    <div class="layui-form-item">
                        <button  id="submit" type="button" data-type="reload" class="layui-btn layui-btn-primary" >提交留言</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="f-cb"></div>
        <div class="mt20">
            <ul class="message-list" id="message-list">
                <li class="zoomIn article" th:each="message0 : ${message}" th:if="not ${message0.message_parant_id}">
                    <div class="comment-parent">
                        <a name="remark-1"></a>
                        <img th:src="'http://blog-cxz.oss-cn-beijing.aliyuncs.com/'+${message0.user_id}+'.jpg'">
                        <div class="info">
                            <span class="username" th:text="${message0.user_name}"></span>
                        </div>
                        <div class="comment-content" th:text="${message0.message_content}">
                        </div>
                        <p class="info info-footer">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                            <span th:text="${message0.message_ip}"></span>
                            <span class="comment-time" th:text="${message0.message_time}"></span>
                            <a href="javascript:;" class="btn-reply" data-targetid="1" th:data-targetname="${message0.user_name}">回复</a>
                        </p>
                    </div>
                    <hr />

                    <div class="comment-child" th:each="message1 : ${message}" th:if="${message1.message_parant_id} eq ${message0.message_id}">
                        <a name="reply-1"></a>
                        <img th:src="'http://blog-cxz.oss-cn-beijing.aliyuncs.com/'+${message1.user_id}+'.jpg'">
                        <div class="info">
                            <span class="username" th:text="${message1.user_name}"></span>
                            <span th:text="${message1.message_content}"></span>
                        </div>
                        <p class="info">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                            <span th:text="${message1.message_ip}"></span>
                            <span class="comment-time" th:text="${message1.message_time}"></span>
                        </p>
                    </div>
                    <div class="replycontainer layui-hide">
                      <form class="layui-form" action="/childMessages" method="post">
                          <input type="hidden" id="child_message_parant_id" name="child_message_parant_id" th:value="${message0.message_id}">
                               <div class="layui-form-item">
                                 <textarea id="child_message_content" name="child_message_content" lay-verify="replyContent" placeholder="请输入回复内容" class="layui-textarea" style="min-height:80px;"></textarea>
                                 </div>
                            <div class="layui-form-item">
                              <button th:id="${message0.message_id}" type="submit" data-type="reload" class="layui-btn layui-btn-primary">提交</button>
                            </div>
                         </form>
                    </div>
                    <hr>

                </li>
            </ul>
        </div>
    </div>
</div>
<footer class="grid-footer">
    <div class="footer-fixed">
        <div class="copyright">
            <div class="info">
                <div class="contact">
                    <a href="https://github.com/qz501664112/501664112.github.com.git" class="github" target="_blank"><i class="fa fa-github"></i></a>
                    <a href="javascript:void(0)"  onclick="qqShare('http://60.205.188.140:8888/','心如止水,明镜致远','博以至客论坛',null,'http://60.205.188.140:8888/image/501664112.jpg')" class="qq" target="_blank" ><i class="fa fa-qq"></i></a>
                    <a href="https://mail.qq.com" class="email" target="_blank" ><i class="fa fa-envelope"></i></a>
                    <a href="weixin://" class="weixin"><i class="fa fa-weixin"></i></a>
                </div>
                <p class="mt05">
                    Copyright &copy; 2021-2021 初学者 <a style="color: white" href="http://www.mygirlfriends.cn/">mygirlfriends.cn</a> 版权所有 ICP证:<a style="color: white" href="https://beian.miit.gov.cn/">赣ICP备2021004732号</a>
                </p>
            </div>
        </div>
    </div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="../js/yss/gloable.js"></script>
<script src="../js/plugins/nprogress.js"></script>
<script src="../js/pagemessage.js"></script>
<script type="text/javascript">
    function qqShare(url,title,summary,pics){
        var urlPath = "https://connect.qq.com/widget/shareqq/index.html?url="+ encodeURI(url) +
            "&desc=&title=" + title +
            "&summary=" + summary +
            "&pics=" + pics;
        window.open (urlPath, 'qq分享', 'height=637, width=1053, top=195,left=459, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
    }
</script>
<script  th:inline="javascript">
    layui.use('form', function() {
        var form = layui.form;
        $("#submit").on("click", function () {
            console.log([[${session.id}]])
            if ([[${session.id}]] == null) {
                layer.confirm('请登录后再留言!')
            } else {
                $.ajax({
                    type: 'post',
                    url: '/message/toMessages',
                    data: {"message_content":$("#message_content").val()},
                    success: function (data) {
                        if (data.msg == '200') {
                            window.parent.location.reload();
                        } else {
                            layer.confirm('留言失败!')
                        }
                    },
                    error:function (data) {
                        layer.confirm('留言失败!')
                    }
                })
            }

        })
    });
</script>
</body>
</html>
